//验证浏览器是否支持WebSocket协议
if (!window.WebSocket) {
    alert("WebSocket not supported by this browser!");
}
var ws;
var userId = 0;
var user = "";
var avatar = "";
var isLinkWs = false;
var avatarList = [
    "img/avatar/avatar_0.jpg",
    "img/avatar/avatar_1.jpg",
    "img/avatar/avatar_2.jpg",
    "img/avatar/avatar_3.jpg",
    "img/avatar/avatar_4.jpg",
    "img/avatar/avatar_5.jpg",
    "img/avatar/avatar_6.jpg",
    "img/avatar/avatar_7.jpg",
    "img/avatar/avatar_8.jpg",
    "img/avatar/avatar_9.jpg",
    "img/avatar/avatar_10.jpg",
    "img/avatar/avatar_11.jpg",
];

checkAvatar();

function display() {

    if(isLinkWs){
        return false;
    }
    document.getElementById('link_href').innerHTML = "连接中...";
    ws = new WebSocket("ws://localhost:8181/ws");
    isLinkWs = true
    user = document.getElementById('user').value;
    ws.onmessage = function(event) {
        console.log(event.data)
        log(event.data);
    };
    ws.onclose = function(event) {
        alert("连接已关闭");
    };
    ws.onopen = function(event) {
        console.log(event.data);
        document.getElementById('link_href').innerHTML = "连接";
        document.getElementById('wait_link').style.display = "none";
        document.getElementById('linked').style.display = "block";
        document.getElementById('nicknameSpan').innerHTML = user;
        document.getElementById('avatarImg').src = avatar;
        ws.send('{"user_id":'+userId+',"user":"system","body":"'+ user +' 加入群聊"}');
    };
    ws.onerror =function(event){
    };
}
var log = function(s) {
    if (document.readyState !== "complete") {
        log.buffer.push(s);
    } else {
        var msgObj = JSON.parse(s);


        if (msgObj.user == user){
            var dom = '<div class="msg-item">'+
                '<div class="right-item">'+
                '<div class="avatar right">'+
                '<img class="circle" src="' + msgObj.avatar + '" width="40" height="40" />'+
                '</div>'+
                '<div class="content right-align">'+
                '<div class="nickname">' + msgObj.user + '</div>'+
                '<span>' + msgObj.body + '</span>'+
                '</div>'+
                '</div>'+
                '</div>';
        }else if(msgObj.user == "system"){
            var dom = '<div class="msg-item"><span class="system">' + msgObj.body + '</span></div>';
        }else if(msgObj.user == "message"){
            userId = msgObj.user_id;
            var dom = '<div class="msg-item"><span class="system">' + msgObj.body + '</span></div>';
        }else{
            var dom = '<div class="msg-item">'+
                '<div class="left-item">'+
                '<div class="avatar left">'+
                '<img class="circle" src="' + msgObj.avatar + '" width="40" height="40" />'+
                '</div>'+
                '<div class="content left-align">'+
                '<div class="nickname">' + msgObj.user + '</div>'+
                '<span>' + msgObj.body + '</span>'+
                '</div>'+
                '</div>'+
                '</div>';
        }
        if (msgObj.user == "online"){
            document.getElementById('online').innerText = msgObj.body;
        }else{
            document.getElementById("msgList").innerHTML += (dom + "\n");
        }
        document.getElementById("msgList").scrollTop = document.getElementById("msgList").scrollHeight;
    }
}
function bodyMsg(){
    var body = document.getElementById("body").value;
    body = body.replace(/\r/g,"&nbsp;")
    body = body.replace(/\n/g,"<br />")
    return '{"user_id":'+userId+',"avatar":"' + avatar + '","user":"'+user+'","body":"'+body+'"}';
}
function sendMsg(){
    var msg = bodyMsg();
    document.getElementById("body").value = "";
    ws.send(msg);
}
function checkAvatar(){
    if(isLinkWs){
        return false;
    }
    var len = avatarList.length;
    var index = Math.random() * len;
    index = Math.floor(index);
    console.log(index);
    var img = avatarList[index];
    avatar = img
    document.getElementById("avatar").src = img
}
document.onkeydown=function(event){
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode==27){ // 按 Esc
        //要做的事情
        alert("ESC退出")
    }
    if(e && e.keyCode==113){ // 按 F2
        //要做的事情
        alert("F2");
    }
    if(e && e.keyCode==13){ // enter 键
        sendMsg();
    }
};